<template>
	<div class="wkk">
		<div class="head-top">预开班级&nbsp;&nbsp;<i class="el-icon-refresh" style="cursor: pointer;" @click="ykbj()"></i>
		    <span  type="primary" class='submit' v-if="qxbtn.c009x" @click="showaddbj" >+ 新增预设开班</span>
			<router-link to="/admin/yushebj">
				<div class="gd" style="float: right;">更多</div>
			</router-link>
		</div>
			<div class='bt1' v-for="v in ykbjList" >
				<div class="ykbj" v-if="v.ztmc == '未开班'"   @click="componentsShow('edit',v)" style="font-size: 14px;">
					<p id="p1" style="font-size: 15px; color: white;">{{v.mc}}（{{v.lsmc}}）</p>
					<p id="p1" style="margin-bottom: 10px; color: white;">人数：{{v.xs}}</p>
					<p id="p1" style="margin-bottom: 18px; color:white;">预开日期：{{v.yjkbrq}}</p>
					<router-link :to="{path:'/cost/baoming',query: {iid:v.id,bjmc:v.mc,frompage:'xsadd'}}">
						<div class="xsbm" @click.stop = 'add()' style="width: 60px;height: 28px;font-size:12px ;float: left; border-radius:10px;background:#50BFFF;line-height: 28px;color: white;">报名缴费</div>
					</router-link>
					<router-link :to="{path:'/cost/baoming',query: {iid:v.id,bjmc:v.mc,frompage:'xslist'}}">
						<div class="xsbm" @click.stop = 'add()' style="width:60px;height: 28px;font-size:12px ;float: right; border-radius:10px;background:#50BFFF;line-height: 28px;color: white;">班级学生</div>
					</router-link>
				</div>
				<div class="ykbj1" v-if="v.issys == 'Y'"  style="font-size: 14px;cursor: pointer;">
					<p id="p1" style="font-size: 15px; color: white;">{{v.mc}}</p>
					<p id="p1" style="margin-bottom: 10px; color: white;">人数：{{v.xs}}</p>
					<router-link :to="{path:'/cost/baoming',query: {iid:v.id,bjmc:v.mc,frompage:'xsadd'}}">
						<div class="xsbm" @click.stop = 'add()' style="width: 60px;height: 28px;font-size:12px ;float: left; border-radius:10px;background:#F3855F;line-height: 28px;color: white;margin-top: 32px;">报名缴费</div>
					</router-link>
					<router-link :to="{path:'/cost/baoming',query: {iid:v.id,bjmc:v.mc,frompage:'xslist'}}">
						<div class="xsbm" @click.stop = 'add()' style="width:60px;height: 28px;font-size:12px ;float: right; border-radius:10px;background:#F3855F;line-height: 28px;color: white;margin-top: 32px;">班级学生</div>
					</router-link>
				</div>
			</div>
		<Homeysbjlist v-if="this.toggle" @close="yushebjclose"  :params="bjlxparams"></Homeysbjlist>
		<Homeysbjeditlist v-if="portComponents.edit.toggle" @close="componentsHide" :params="portComponents.edit.params"></Homeysbjeditlist>
	</div>
</template>
<script type="text/javascript">
	import Homeysbjlist from '../../view/admin/yushebjManage/add'
	import Homeysbjeditlist from '../../view/admin/yushebjManage/edit'
	export default {
		components: { Homeysbjlist,Homeysbjeditlist},
		data() {
			return {
				qxbtn:{ c009x:false},
				toggle: false,
				bjlxparams:{
					bjlx:'N'
				} ,
				ykbjList: [], //预开班级
				form:{
					id:''
				},
                portComponents: {
	                edit: {
						type: 'edit',
						toggle: false,
						params: '',
						data: {}
					}
                }
			}
		},
		created() {
            var logininfo = JSON.parse(localStorage.logininfo) ;
            this.qxbtn.c009x = (logininfo.auth.indexOf("c009x")!=-1);
			this.ykbj();
		},
		methods: {
			add(){},
			yushebjclose(setting) {
				if(!setting.cancel)
					this.ykbj();
				this.toggle = false;
			},
			showaddbj() {
				this.toggle = true;
			},
			ykbj() {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.axios.get(this.$store.state.api + 'ysbj/bjsylist', {
					params: {
						yhid: logininfo.id,
						xxid: logininfo.xxid,
					}
				}).then(res => {
//					console.log(res,'sssss')
					let data = res.data.data;
					let list = data.data;
					this.total = data.totalPage;
					this.ykbjList = data;
				}).catch(res => {
				})
			},
			handleSelect(key, keyPath) {
//				console.log(key, keyPath);
			},
			componentsShow(type, data) { //显示组件
				for(let i in this.portComponents) {
					if(type == this.portComponents[i].type) {
						this.portComponents[i].toggle = true;
						this.portComponents[i].params = data;
						if(this.portComponents[i].data.type == 'single') {
						   this.portComponents[i].data.index = data.row.id
						} else if(this.portComponents[i].data.type == 'multiple') {
							this.portComponents[i].data.index = this.multipleDelNum;
						}  else {
							return;
						}
						return;
					}
				}
			},
			componentsHide (setting) { //关闭组件
                           this.ykbj();
                for ( let i in this.portComponents ) {
                    if (setting.type == this.portComponents[i].type) {
                        this.portComponents[i].toggle = false;
                        if (!setting.cancel) {
                           this.ykbj();
                        }
                        return;
                    }
                }
            }
		}
	}
</script>
<style lang="less" scoped>
	.wkk {
		width: 100%;
		margin: 0 auto;
		margin-top: 10px;
		margin-bottom: 10px;
		border-top: 3px solid deepskyblue;
		float: left;
		background: white;
	}
	.head-top {
		width: 100%;
		text-align: left;
		font-size: 16px;
		padding: 18px 20px;
		border-bottom: 1px solid #CCCCCC;
	}
	.ykb {
		width: 19%;
		height: 120px;
		float: left;
		border-radius: 8px;
		margin-right: 11px;
		margin-top: 10px;
		/*margin-left: 10px;*/
		background: white;
		position: relative;
		}
	.bt1 {
		width: 250px;
		height: 120px;
		float: left;
		border-radius: 8px;
		margin-right: 11px;
		margin-top: 10px;
		margin-left: 10px;
		background: white;
		position: relative;
	}
	/*.bt1:hover{
		 transform:scale(1.1);
        -ms-transform:scale(1.1);
        -webkit-transform:scale(1.1);
        -o-transform:scale(1.1);
        -moz-transform:scale(1.1);
	}*/
	.el-icon-refresh:hover{
		 transform:scale(1.1);
        -ms-transform:scale(1.1);
        -webkit-transform:scale(1.1);
        -o-transform:scale(1.1);
        -moz-transform:scale(1.1);
	}
	.submit{
		display: inline;
		margin-left: 20px;
		color: red;
		cursor: pointer;
	}

	.bt1 .ykbj {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		cursor: pointer;
		float: left;
		background: #409EFF;
		box-shadow: 7px 7px 7px #B3B3B3;
		border-radius: 8px;
		color: white;
		text-align: center;
		/*border-top: 30px solid lightgreen;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
  	margin-right: 10px;
  	margin-top: 10px;
  	transform: rotate(225deg);*/
	}
	.bt1 .ykbj1 {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		float: left;
		background: #F3855F;
		box-shadow: 7px 7px 7px #B3B3B3;
		border-radius: 8px;
		color: white;
		text-align: center;
		/*border-top: 30px solid lightgreen;;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
  	margin-right: 10px;
  	margin-top: 10px;
  	transform: rotate(225deg);*/
	}
	/*.bt1 .ykbj1 {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		float: left;
		background:#F05857;
		box-shadow: 7px 7px 7px #B3B3B3;
		border-radius: 8px;
		color: white;
		text-align: center;
		border-top: 30px solid lightgreen;;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
  	margin-right: 10px;
  	margin-top: 10px;
  	transform: rotate(225deg);
	}*/

	.bt1 .bj {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		float: left;
		background: #52B058;
		box-shadow: 7px 7px 7px #B3B3B3;
		border-radius: 8px;
		color: white;
		text-align: center;
		/*border-top: 30px solid lightgreen;;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
  	margin-right: 10px;
  	margin-top: 10px;
  	transform: rotate(225deg);*/
	}

	.bt1 .bj1 {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0%;
		float: left;
		background: #F05857;
		box-shadow: 7px 7px 7px #B3B3B3;
		border-radius: 8px;
		color: white;
		text-align: center;
		/*border-top: 30px solid red;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
  	margin-right: 10px;
  	margin-top: 10px;
  	transform: rotate(225deg);*/
	}


	.bt1 #p1 {
		text-align: center;
		font-size: 14px;
		color: black;
		margin-top: 10px;
	}
</style>
